<template>
  <img :src="musicIcon" class="music" @click="changeMusicPlay">
</template>
<script>
import Utils from './../utils.js'
export default {
  name: "",
  data () {
    return {
  
    };
  },
  computed:{
    isPlay(){
      return this.$store.state.isPlaying
    },
    musicIcon(){
      return this.isPlay ? Utils.imgs.musicPlay : Utils.imgs.musicPause
    },
  },
  mounted(){
 
  },
  methods:{
    changeMusicPlay(){
      this.$store.commit('updateMusicStatus',!this.isPlay)
    },
  },
}
</script>
<style lang="scss" scoped>
@import './../styles/common.scss';
img{
  width: px2rem(60);
  height: px2rem(60);
}
</style>